<template>
  <div class="wrap">
    <swiper
      class="swiper"
      :display-multiple-items="true"
      :indicator-dots="true"
    >
      <swiper-item
        v-for="(item, index) in info.productPicList"
        :key="index"
      >
        <video
          class="cover"
          v-if="item.picType == 2"
          :poster="item.picUrl"
          :src="item.videoUrl"
        ></video>
        <img
          v-else
          class="cover"
          :src="item.picUrl"
          @click="preImg(item.picUrl)"
        />
      </swiper-item>
    </swiper>
    <div class="price">
      <span v-if="info.productType == 1">¥{{info.price}}</span>
      <span v-else>{{info.price}}积分</span>
      <span class="number">已售：{{info.monthSales}}</span>
    </div>
    <div class="name van-multi-ellipsis--l2">{{info.productName}}</div>
    <div
      class="tags"
      @click="handleSelect(0)"
    >
      <div>
        {{info.defaultColorName ||info.defaultSpecsName ? '已选' : '未选择'}}
        <span v-if="info.defaultColorName">
          {{info.defaultColorName}}
        </span>
        <span v-if="info.defaultSpecsName">
          {{info.defaultSpecsName}}
        </span>
      </div>
      <van-icon
        name="arrow"
        class="arrows-size"
      />
    </div>
    <div class="content">
      <div class="title">商品详情</div>
      <rich-text :nodes="info.productDtl" />
    </div>
    <van-goods-action>
      <van-goods-action-icon
        icon="chat-o"
        text="客服"
        open-type="contact"
        session-from="weapp"
      />
      <van-goods-action-button
        v-if="info.productType == 1"
        text="加入购物车"
        type="warning"
        @click="handleSelect(1)"
      />
      <van-goods-action-button
        text="立即购买"
        @click="handleSelect(2)"
      />
    </van-goods-action>
    <van-action-sheet
      :show="visibleOrder"
      title="选择类型"
      @close="handleSelect"
      @touchmove.stop='false'
    >
      <div class="buy-info">
        <div class="base flex">
          <img
            :src="imgUrl"
            class="small-cover"
          />
          <div class="desc">
            <div class="price desc--margin">¥{{info.price*number}}</div>
            <div class="desc-tag">
              {{specsName ||colorName ? '已选' : '未选择'}}
              <span v-if="colorName">
                {{colorName}}
              </span>
              <span v-if="specsName">
                {{specsName}}
              </span>
            </div>
          </div>
        </div>
        <div class="choose-content">
          <div class="choose-title">颜色</div>
          <ul class="choose-tags">
            <li
              :class="item.colorId === colorId ? 'acitve' : ''"
              v-for="(item,index) in info.productColorList"
              :key="index"
              @click="checkedColor(item)"
            >{{item.colorName}}</li>
          </ul>
        </div>
        <div class="choose-content">
          <div class="choose-title">尺寸</div>
          <ul class="choose-tags">
            <li
              :class="item.specsId === specsId ? 'acitve' : ''"
              v-for="(item,index) in info.productSpecsList"
              :key="item.specsId"
              @click="checkedSpecs(item)"
            >{{item.specsName}}</li>
          </ul>
        </div>
        <div class="buy-number">
          <span>购买数量</span>
          <div class="option">
            <div
              class="option-box sub"
              @click="changeNumber('-')"
            >-</div>
            <input
              class="option-box input"
              type="number"
              v-model="number"
            >
            <div
              class="option-box add"
              @click="changeNumber('+')"
            >+</div>
          </div>
        </div>
      </div>
      <div
        class="choose-btn"
        @click="handleOk"
      >确定</div>
    </van-action-sheet>
  </div>
</template>
<script>
const contactIcon = require('@static/images/contact.png');
export default {
  data() {
    return {
      info: {},
      contactIcon,
      visibleOrder: false,
      number: 1,
      colorId: null,
      colorName: '',
      specsName: '',
      specsId: null,
      imgUrl: ''
    };
  },
  methods: {
    preImg(url) {
      console.log(url);
      let urls = this.info.productPicList.map((item) => {
        return item.picUrl
      })
      wx.previewImage({
        current: url, // 当前显示图片的http链接
        urls // 需要预览的图片http链接列表
      })
    },
    getDetail(id) {
      this.$api.getProductInfo({
        productId: id
      }).then(({ data }) => {
        data.productPicList.sort(function (a, b) {
          return b.picType - a.picType;
        });
        data.productDtl = data.productDtl.replace(/<(img).*?(\/>|<\/img>)/g, function (str) {
          if (str.indexOf('style') < 0) {
            return str.replace(/<\s*img/, '<img style="max-width:100%; height: auto!important; "');
          } else {
            return str.replace(/style=("|')/, 'style=$1max-width:100%; height: auto!important; ');
          }
        });
        this.info = data;
        this.specsId = data.defaultSpecsId;
        this.colorId = data.defaultColorId;
        this.colorName = data.defaultColorName;
        this.specsName = data.defaultSpecsName;
        this.imgUrl = data.productPicList.find(item => item.colorId === data.defaultColorId).picUrl;
      });
    },
    handleBuy() {
      const { productId, defaultColorId, defaultSpecsId, productName, productPicList } = this.info;
      this.$api.buyNowProduct({
        productId,
        colorId: defaultColorId,
        specsId: defaultSpecsId,
        buyNums: this.number
      }).then((res) => {
        if (res.code === 0) {
          this.globalData.shopOrderInfo = res.data;
          wx.navigateTo({
            url: `/pages/shop/pay/main`
          });
        }
      });
      // wx.navigateTo({
      //     url: `/pages/shop/pay/main?productName=${productName}&cover=${productPicList[0]}&productId=${productId}&colorId=${defaultColorId}&specsId=${defaultSpecsId}&number=${this.number}`
      // });
    },
    handleSelect(type) {
      this.gotype = type
      this.visibleOrder = !this.visibleOrder;
      this.number = this.info.number || 1;
    },
    changeNumber(type) {
      if (type === '-' && this.number > 1) {
        this.number -= 1;
      } else if (type === '+') {
        this.number += 1;
      }
    },
    checkedSpecs(item) {
      this.specsId = item.specsId;
      this.specsName = item.specsName;
      this.$nextTick((res) => {
        this.changePrice(item);
      });
    },
    checkedColor(item) {
      this.colorId = item.colorId;
      this.colorName = item.colorName;
      this.$nextTick((res) => {
        this.imgUrl = this.info.productPicList.find(item => item.colorId === this.colorId).picUrl;
        this.changePrice(item);
      });
    },
    changePrice(item) {
      this.$api.getProductPrice({
        productId: this.info.productId,
        colorId: this.colorId,
        specsId: this.specsId
      }).then(({ data }) => {
        this.info.price = data.price;
      });
    },
    handleOk() {
      this.info.defaultSpecsName = this.specsName;
      this.info.defaultColorName = this.colorName;
      this.info.defaultSpecsId = this.specsId;
      this.info.defaultColorId = this.colorId;
      this.info.number = this.number;
      this.$nextTick(() => {
        if (this.gotype === 1) {
          this.addCar();
        } else if (this.gotype === 2) {
          this.handleBuy();
        }
        this.visibleOrder = false;
      });
    },
    addCar() {
      this.$api.setShopCar({
        productId: this.info.productId,
        colorId: this.info.defaultColorId,
        specsId: this.info.defaultSpecsId,
        buyNums: this.number
      }).then((res) => {
        wx.showToast({
          title: '已加入购物车',
          icon: 'success',
          mask: true,
          duration: 3000
        });
      });
    }
  },
  onLoad() {
    Object.assign(this.$data, this.$options.data());
  },
  onShow() {
    const params = this.$getQuery();
    this.getDetail(params.id || 1685);
  }
}
</script>
<style lang="scss" scoped>
.wrap {
  padding-bottom: 50px;
}
.cover,
.swiper {
  width: 375px;
  height: 375px;
}
.price {
  font-size: 15px;
  color: $yellow-color;
  line-height: 30px;
  padding: 10px 15px;
  .number {
    font-size: 12px;
    color: $grey-color;
    margin-left: 15px;
  }
}
.name {
  color: $color-text;
  font-size: 14px;
  line-height: 24px;
  padding: 0px 15px 15px;
}
.tags {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px;
  border-top: 1px solid $grey-border-color;
  border-bottom: 8px solid $grey-bg;
  color: #666;
  font-size: 12px;
  span {
    margin-left: 10px;
    color: $color-text;
    font-size: 14px;
  }
  .arrows-size {
    font-size: 18px;
  }
}
.content {
  text-align: center;
  padding: 15px;
}
.title {
  text-align: left;
  border-left: 2px solid $yellow-color;
  margin: 10px 0px;
  padding-left: 10px;
}

.shop-img {
  width: 355px;
  margin-bottom: 10px;
}
.small-cover {
  width: 120px;
  height: 120px;
}
.buy-info {
  padding: 15px;
}
.desc {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.desc-tag {
  padding: 0px 10px 15px;
}
.desc--margin {
  padding-bottom: 0px;
}
.choose-title {
  line-height: 40px;
}
.choose-tags {
  display: flex;
  flex-wrap: wrap;
  li {
    width: 80px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background: #f6f6f6;
    border-radius: 2px;
    box-sizing: border-box;
    font-size: 12px;
    color: #5e646b;
    margin-right: 10px;
    margin-bottom: 10px;
  }
  li.acitve {
    border: 1px solid $yellow-color;
    background: #fff7ec;
    color: $yellow-color;
  }
}
.buy-number {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.option {
  display: flex;
  align-items: center;
}
.option-box {
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  font-size: 20px;
  color: #666;
  margin-left: 5px;
  background: #f6f6f6;
}
.input {
  font-size: 15px;
  width: 40px;
}
.choose-btn {
  height: 48px;
  line-height: 48px;
  text-align: center;
  background: $yellow-color;
  color: #fff;
  font-size: 18px;
}
</style>